import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../../config/global';
import { style } from '../../../../../theme/style';

const scale = GLOBAL.SCALE;

export class QHApproveItem extends Component {
	constructor(props) {
		super(props);
	}

	render () {
		const { itemInfo, goDetail, approveType, choice } = this.props;
		let { businessKey, taskId, taskName, formKey, orderItemList, orderInfo, resUrl,
			auditResultName, processInstanceId, createTime } = itemInfo;
		return (
			<TouchableOpacity key={taskId + businessKey} activeOpacity={.5} style={styles.orderCell}
				onPress={() => {
					if (!orderInfo) return;
					let title = '泉化销售单申请作废审批';

					goDetail({
						orderId: orderInfo.orderId ? orderInfo.orderId : '',
						businessKey,
						taskId,
						formKey,
						companyName: orderInfo.companyName ? orderInfo.companyName : '',
						resUrl: 'QHApprovePage',
						auditResultName,
						approveType,
						processInstanceId
					}, title)
				}
				}>
				<View style={styles.order}>
					<View style={styles.orderHeadView}>
						<View style={styles.orderHead}>
							<View style={styles.orderHeadLeft}>
								<Text style={styles.orderHeadText}>
									{
										orderInfo && orderInfo.companyName ? (
											orderInfo.companyName.length > 8 ? orderInfo.companyName.substr(0, 8) + '...' : orderInfo.companyName
										) : null
									}
								</Text>
							</View>
							<Text style={styles.statusText}>{auditResultName}</Text>
						</View>
						<Text style={{ fontSize: 10 * scale, paddingBottom: 12 * scale, color: '#848A96' }}>(业务组织：{choice.corpName || '-'})</Text>
					</View>
					<View style={styles.orderCol}>
						<Text style={styles.orderText}>订单编号：</Text>
						<Text style={styles.orderVal}>{orderInfo && orderInfo.orderId ? orderInfo.orderId : null}</Text>
					</View>
					<View style={styles.orderMain}>
						<View style={styles.orderCol}>
							<Text style={styles.orderText}>任务名称：</Text>
							<Text style={styles.orderVal}>{taskName || ''}</Text>
						</View>
						{
							orderItemList && orderItemList.length > 0 ?
								orderItemList.map((orderItemList, index) => {
									return (
										<View key={index} style={styles.orderMain}>
											<View style={styles.orderCol}>
												<Text style={styles.orderText}>商品：</Text>
												<Text style={styles.orderVal}>{orderItemList.goodsName.length > 8 ? orderItemList.goodsName.substr(0, 8) + '...' : orderItemList.goodsName || null}</Text>
											</View>
											<View style={styles.orderCol}>
												<Text style={styles.orderText}>商品数量：</Text>
												<Text style={styles.orderVal}>
													{orderItemList.quantity ? orderItemList.quantity : 0}
													{orderItemList.uomName ? orderItemList.uomName : '吨'}</Text>
											</View>
										</View>
									)
								})
								: null
						}
						<View style={styles.orderCol}>
							<Text style={styles.orderText}>申请人：</Text>
							<Text style={styles.orderVal}>{orderInfo && orderInfo.bizStaffName ? orderInfo.bizStaffName : null}</Text>
						</View>
						<View style={styles.orderCol}>
							<Text style={styles.orderText}>申请时间：</Text>
							<Text style={styles.orderVal}>{createTime || '-'}</Text>
						</View>
						<View style={styles.orderNum}>
							<Text style={styles.orderText}>业务员：</Text>
							<Text style={styles.orderValgo}>{orderInfo.bizStaffName || '--'} | {orderInfo.bizTeamName || '--'} | {orderInfo.bizOrganName || '--'}
							</Text>
						</View>
					</View>
				</View>
			</TouchableOpacity >
		)
	}
}

const styles = StyleSheet.create({
	orderCell: {
		width: 375 * scale,
		backgroundColor: '#fff',
		alignItems: 'center',
		marginBottom: 12 * scale,
	},
	order: {
		width: 351 * scale,
	},
	orderHead: {
		width: 351 * scale,
		height: 44 * scale,
		justifyContent: 'space-between',
		alignItems: 'center',
		flexDirection: 'row',
	},
	orderHeadView: {
		width: 351 * scale,
		borderBottomColor: '#e4e4e4',
		borderBottomWidth: 1 / PixelRatio.get(),
	},
	orderHeadLeft: {
		height: 44 * scale,
		alignItems: 'center',
		flexDirection: 'row',
	},
	orderHeadText: {
		fontSize: 14 * scale,
		color: '#222',
		marginRight: 6 * scale,
		marginLeft: 6 * scale,
		flexWrap: 'wrap',
	},
	conImage: {
		width: 20 * scale,
		height: 14 * scale,
		marginLeft: 5 * scale,
	},
	forwardText: {
		paddingTop: 2 * scale,
		marginTop: 2 * scale,
		marginRight: 6 * scale,
		width: 30 * scale,
		height: 16 * scale,
		backgroundColor: '#49CAFF',
		color: '#FFFFFF',
		fontSize: 11 * scale,
		textAlign: 'center',
		borderRadius: 4 * scale,
	},
	statusText: {
		fontSize: 13 * scale,
		color: style.color.themeColor,
	},
	orderCol: {
		flexDirection: 'row',
		alignItems: 'center',
		height: 25 * scale,
		width: 175.5 * scale,
	},
	orderNum: {
		flexDirection: 'row',
		alignItems: 'center',
		height: 25 * scale,
		width: 375 * scale,
	},
	orderText: {
		fontSize: 12 * scale,
		color: '#8B8B8B'
	},
	orderVal: {
		fontSize: 12 * scale,
		color: '#000'
	},
	orderValgo: {
		fontSize: 12 * scale,
		color: '#000'
	},
	orderMain: {
		flexDirection: 'row',
		paddingTop: 8 * scale,
		paddingBottom: 8 * scale,
		flexWrap: 'wrap'
	},
	tip: {
		color: '#fff',
		fontSize: 12 * scale,
		borderRadius: 4 * scale,
		paddingRight: 5 * scale,
		paddingLeft: 5 * scale,
		marginRight: 5 * scale
	}
})